<!--订单详情-->
<template>
    <div class="page_todoUsed">
        <div class="orderContent pageSpecialBackground" style="height: 100%; overflow-y: auto;">
            <div class="orderState" v-if="orderDetailsInfo">
                <span v-if="orderDetailsInfo.state === 2">待使用</span>
                <span v-if="orderDetailsInfo.state === 4">已完成</span>
            </div>
            <div class="time translateBlock" v-if="orderDetailsInfo.state === 2">
                <div class="translateBlock">
                    <img src="../../../static/images/time1.png" class="vMiddle iconTime" alt=""/>
                </div>
                <div class="translateBlock vMiddle">
                    <span>有效期:</span>
                    <span v-if="orderDetailsInfo">{{orderDetailsInfo.effective_date}}</span>
                </div>
            </div>
            <div class="qrcodeInfo everyBlockBgcolor">
                <img v-if="orderDetailsInfo && orderDetailsInfo.order_code"
                     :src="orderDetailsInfo.order_code[0].qr_code" class="iconQRCode" alt=""/>
                <div class="code_number xCenter" :class="orderDetailsInfo.state === 2 ?  'code_number_color' :
                'code_number_color1'">
                    消费码：{{orderDetailsInfo.order_code[0].code_number}}
                </div>
                <div class="btn_reservation xCenter  btn" v-if="orderDetailsInfo.state === 2">
                    立即预约
                </div>
            </div>

            <div class="iconFinish" v-if="orderDetailsInfo.state === 4">
                <img src="../../../static/images/finishedn.png" alt=""/>
            </div>

            <div class="goodsInfo everyBlockBgcolor">
                <div class="title">
                    <img src="../../../static/images/store.png" class="iconStore" alt=""/>
                    <span v-if="good_info">{{good_info.goods_name}}</span>
                </div>
                <div class="goodsDetails" v-if="good_info">
                    <img :src="good_info.good_img[0].img_url" class="iconGoods" alt=""/>
                    <div class="translateBlock" style="vertical-align: top;">
                        <div class="moreTextEllipsis goodsName">{{good_info.goods_title}}</div>
                        <div v-if="good_info.good_specification.length" class="package">
                            {{good_info.good_specification[0].attribute}}
                        </div>
                    </div>
                    <div class="translateBlock goodsPrice" style="vertical-align: top;">
                        <div>¥
                            <span v-if="good_info.good_marketing && good_info.good_marketing.promotion_price">
                                {{good_info.good_marketing.promotion_price}}
                            </span>
                            <span v-else>
                                <span v-if="good_info.good_specification">
                                    {{good_info.good_specification[0].price}}
                                </span>
                            </span>
                        </div>
                        <div v-if="orderDetailsInfo">x{{orderDetailsInfo.amount}}</div>
                    </div>
                </div>
            </div>

            <div class="storeInfo everyBlockBgcolor">
                <!--<div v-if="good_info && good_info.stores_info">-->
                <div class="everyBlockBgcolor shopInfo comMargin">
                    <div class="itemOtherInfo">
                        <img class="iconImg vMiddle" src="../../../static/images/icon-shop.png" alt=""/>
                        <div class="translateBlock label vMiddle">店铺信息</div>
                        <div class="translateBlock floatFight">
                            <div class="translateBlock mainBgColor number" v-if="good_info">
                                {{good_info.stores_info.length}}
                            </div>
                            <div class="translateBlock shopBtn" @click="showShops = !showShops">
                                <img v-if="!showShops" src="../../../static/images/jiantou_gray.png"
                                     class="iconOpen iconJiantou vMiddle"
                                     alt=""/>
                                <img v-else src="../../../static/images/jiantou_gray.png"
                                     class="iconClose iconJiantou vMiddle"
                                     alt=""/>
                            </div>
                        </div>
                    </div>

                    <div v-show="showShops">
                        <div v-if="good_info && good_info.stores_info">
                            <div class="shopDetails" v-for="item in good_info.stores_info">
                                <div class="translateBlock name">
                                    <div class="shopName">{{item.store_name}}</div>
                                    <div class="shopAddress">{{item.site}}</div>
                                </div>
                                <div class="translateBlock phone">
                                    <img src="../../../static/images/phone.png" class="vMiddle iconPhonr" alt=""/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="orderInfo everyBlockBgcolor">
                <div class="title">订单详情</div>
                <div class="itemOrder">
                    <div class="label translateBlock">订单编号:</div>
                    <div class="text translateBlock" v-if="orderDetailsInfo">{{orderDetailsInfo.number}}</div>
                </div>
                <div class="itemOrder" style="padding-bottom: .55rem;">
                    <div class="label translateBlock">创建时间:</div>
                    <div class="text translateBlock" v-if="orderDetailsInfo">{{orderDetailsInfo.created_at}}</div>
                </div>
                <div class="contactShop">
                    <div class="translateBlock phone">
                        <img v-if="orderDetailsInfo.state === 2" src="../../../static/images/tel.png"
                             class="vMiddle iconPhonr"/>
                        <img v-else src="../../../static/images/phone.png" class="vMiddle iconPhonr"/>
                    </div>
                    <div class="translateBlock vMiddle"
                         :style="{  color: orderDetailsInfo.state === 2 ?  '#4E4E4E' : '#04C15C'}">联系商家
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getToken} from '../../services/order'
    import {XInput, Group, XNumber, Popup, TransferDom} from 'vux'

    export default {
        name: "orderDetails",
        components: {
            XInput,
            Group,
            XNumber,
            Popup
        },
        data() {
            return {
                orderId: this.$route.query.orderId,   // 订单编号
                orderDetailsInfo: null,     // 订单信息
                good_info: null,         // 订单商品详情
                day_span: '',
                hour_spna: '',
                minute_span: '',
                second_span: '',
                showShops: false,    // 是否显示门店
            }
        },

        created() {
            this.getDeatils()
        },
        watch: {},
        methods: {
            // 获取订单详情
            getDeatils() {
                let param = {
                    id: this.orderId,
                }
                this.$post(getToken, param).then(res => {
                    if (res.code === 200) {
                        this.orderDetailsInfo = res.data;
                        this.good_info = res.good_info;
                        let _time1 = this.$tools.changeTimeToNumber(res.data.effective_date);
                        this.computedTime(_time1)
                    }
                })
            },

            // 获取到时间并倒数
            computedTime(second) {
                let _that = this;
                let countdown = second;
                let day = 24 * 60 * 60; //一天秒数
                let hour = 60 * 60; //一小时秒数
                let minute = 60; //分钟
                let _day_span = 0;
                let _hour_spna = 0;
                let _second_span = 0;
                let _minute_span = 0;
                let refreshcode;
                let refreshcode_time;

                refreshcode = setInterval(function () {
                    let span = "";
                    if (countdown > day) {
                        _day_span = Math.floor(countdown / day);
                        span = _day_span + "天";
                        _that.day_span = _day_span;
                    }
                    if (countdown > hour) {
                        _hour_spna = Math.floor((countdown - _day_span * day) / hour);
                        let h = _hour_spna + "小时";
                        _that.hour_spna = _hour_spna > 9 ? _hour_spna : '0' + _hour_spna;
                        span += h;
                    }
                    if (countdown > minute) {
                        _minute_span = Math.floor((countdown - _day_span * day - _hour_spna * hour) / minute);
                        let h = _minute_span + "分";
                        _that.minute_span = _minute_span > 9 ? _minute_span : '0' + _minute_span;
                        span += h;
                    }
                    if (countdown > 0) {
                        _second_span = countdown - _day_span * day - _hour_spna * hour - _minute_span * minute;
                        let s = _second_span + "秒";
                        _that.second_span = _second_span > 9 ? _second_span : '0' + _second_span;
                        span += s;
                    }
                    refreshcode_time = span;
                    _that.endTime = refreshcode_time;

                    if (countdown == '0秒') {
                        _that.endTime = "";
                        clearInterval(refreshcode)
                        return;
                    } else {
                        countdown--;
                    }

                }, 1000);

            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_todoUsed {
        .orderContent {
            height: 20rem;

            .orderState {
                color: #fff;
                font-size: .49rem;
                text-align: center;
                padding: 0.59rem 0 0 .45rem;
            }

            .time {
                width: 100%;
                line-height: .5rem;
                text-align: center;
                font-size: 0.34rem;
                vertical-align: text-top;
                color: #fff;

                .timeBgcolor {
                    background-color: #fff;
                    padding: .02rem .1rem;
                }

                .iconTime {
                    width: .34rem;
                }
            }

            .qrcodeInfo {
                height: 7.9rem;
                border-radius: 10px;
                border-bottom: 1px dotted #C9BCBC;
                text-align: center;
                margin: .5rem 0.25rem 0 0.25rem;

                .iconQRCode {
                    width: 4.3rem;
                    padding: .7rem 0 0rem 0;
                }

                .code_number {
                    width: 3.8rem;
                    line-height: .7rem;
                    font-size: 0.32rem;
                    background-color: #E9E9E9;
                    margin-top: -.4rem;
                    margin-bottom: .4rem;
                }

                .code_number_color {
                    color: #4E4E4E;
                }

                .code_number_color1 {
                    color: #AEAEAE;

                }


                .btn_reservation {
                    width: 2.8rem;
                    height: 1rem;
                    line-height: 1rem;
                    margin-top: .8rem;
                }
            }

            .iconFinish {
                position: absolute;
                top: 5.8rem;
                left: 5.5rem;
            }

            .goodsInfo {
                height: auto;
                margin: -0.01rem 0.22rem 0rem 0.26rem;
                padding: 0 .44rem;
                z-index: 1001;
                border-radius: 10px;
                border-bottom: 1px dotted #C9BCBC;

                .title {
                    line-height: 1.35rem;
                    font-size: .37rem;

                    .iconStore {
                        width: .39rem;
                        vertical-align: text-top;
                        margin-right: .15rem;
                    }
                }

                .goodsDetails {
                    .iconGoods {
                        width: 2rem;
                        height: 1.9rem;
                    }

                    .goodsName {
                        width: 4.5rem;
                        -webkit-line-clamp: 2;
                        font-size: .32rem;
                    }

                    .package {
                        width: fit-content;
                        line-height: .6rem;
                        background-color: #FEF3DB;
                        color: #FF9609;
                        font-size: .25rem;
                        padding: 0 .2rem;
                    }

                    .goodsPrice {
                        width: 1.5rem;
                        text-align: right;
                        font-size: .32rem;
                        vertical-align: top;
                    }
                }

            }

            .storeInfo {
                margin: 0rem 0.25rem;
                border-radius: 10px;

                .shopInfo {
                    border-radius: 10px;
                    border-bottom: 1px dotted #C9BCBC;

                    .shopBtn {
                        width: 1.3rem;
                        text-align: center;
                    }

                    .iconImg {
                        width: 0.4rem;
                        height: 0.4rem;
                        margin-left: .42rem;
                    }

                    .itemOtherInfo {
                        height: 1.3rem;
                        line-height: 1.3rem;
                        font-size: .3rem;
                        color: #4E4E4E;
                    }

                    .label {
                        font-size: 0.37rem;
                        padding: 0 .2rem 0 .1rem;
                    }


                    .number {
                        line-height: .49rem;
                        font-size: .25rem;
                        color: #fff;
                        padding: 0 .3rem;
                        border-radius: 1rem;
                    }

                    .iconOpen {
                        transform: rotate(90deg);
                    }

                    .iconClose {
                        transform: rotate(-90deg);
                    }

                    .iconJiantou {
                        width: .24rem;
                    }

                    .shopDetails {
                        color: #4e4e4e;
                        border-bottom: 1px solid #EBEBEB;
                        margin: .3rem 0 .1rem .42rem;

                        .name {
                            width: 7rem;
                        }

                        .shopName {
                            font-size: .37rem;
                        }

                        .shopAddress {
                            font-size: .32rem;
                            line-height: .44rem;
                        }

                        .iconPhonr {
                            width: .37rem;
                            height: .37rem;
                            margin-top: -.3rem;
                        }

                    }

                    .shopDetails:last-child {
                        border: none;
                    }

                }
            }

            .orderInfo {
                font-size: 0.32rem;
                color: #9F9F9F;
                margin: 0rem 0.25rem 1rem 0.25rem;
                padding: 0 .44rem;
                border-radius: 10px;

                .title {
                    font-size: 0.37rem;
                    color: #4E4E4E;
                    line-height: 1.3rem;
                }

                .itemOrder {
                    line-height: .8rem;

                    .text {
                        padding-left: .54rem;
                    }
                }

                .contactShop {
                    text-align: center;
                    padding: .55rem 0;
                    border-top: 1px solid #E1E1E1;
                }

            }
        }

    }
</style>

